<template>
  <div class="pa30 pb100">
    <el-tabs tab-position="left">
      <el-tab-pane :label="'教学设计(' + teachingTotal + ')'">
        <div v-if="teachingLists" class="clearfix">
          <div v-for="(item, index) in teachingLists" :key="index" class="pa10 list-decoration fl">
            <el-card shadow="never">
              <el-col :span="24">
                <el-col :span="5">
                  <div v-if="item.original" class="tags">原创</div>
                  <div v-else class="tags">转载</div>
                </el-col>
                <el-col :span="18" :offset="1">
                  <div class="title-decoration text-s-o text-ellipsis-1">{{ item.title }}</div>
                </el-col>
              </el-col>
              <el-col :span="24">
                <el-col :span="10">
                  <div class="fs-14">
                    <span v-if="item.grade">{{ item.grade }}/</span>
                    <span v-if="item.subject">{{ item.subject }}/</span>
                    <span v-if="item.term">{{ item.term }}</span>
                  </div>
                </el-col>
                <el-col :span="5" :offset="2">
                  <div class="fs-14">课时{{ item.classTime }}</div>
                </el-col>
              </el-col>

              <el-col :span="24">
                <div
                  v-if="item.resTeachingDesign"
                  class="fl fs-14 border-default line-height20 border-radius10 pl10 pr10"
                >{{ item.resTeachingDesign }}</div>
                <div
                  v-if="item.resCourseware"
                  class="fl fs-14 border-default line-height20 border-radius10 pl10 pr10 marginL10"
                >{{ item.resCourseware }}</div>
                <div
                  v-if="item.resTeachingReflection"
                  class="fl fs-14 border-default line-height20 border-radius10 pl10 pr10 marginL10"
                >{{ item.resTeachingReflection }}</div>
                <div
                  v-if="item.resCourseVideo"
                  class="fl fs-14 border-default line-height20 border-radius10 pl10 pr10 marginL10"
                >{{ item.resCourseVideo }}</div>
              </el-col>
              <!-- <el-col :span="24">
                <span class="font-color fs-14"
                  >{{ item.subjects_text }}缺教案的重点内容</span
                >
              </el-col>-->
              <div class="clearfix">
                <div
                  v-for="(items, indexs) in item.subject_type"
                  :key="indexs"
                  class="fl tags tag-decoration fs-12 margin5"
                >{{ items.type }}</div>
              </div>
              <div>
                <span class="font-color fs-14">
                  {{
                  item.subjects_content
                  }}
                </span>
              </div>
              <el-row>
                <el-col :span="4">
                  <div class="grid-content">
                    <i class="el-icon-chat-dot-round fs-14">&nbsp;{{ item.countComment }}</i>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content">
                    <i class="el-icon-position fs-14">&nbsp;{{ item.countShare }}</i>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="grid-content">
                    <i class="el-icon-thumb fs-14">&nbsp;{{ item.countThumb }}</i>
                  </div>
                </el-col>
                <el-col :span="11" :offset="1">
                  <div class="grid-content fs-14">{{ item.createTime }}</div>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </div>
        <Pagination :total="teachingTotal ? teachingTotal : 0" @pagination="paginationTeaching" />
      </el-tab-pane>
      <el-tab-pane :label="'教研(' + researchTotal + ')'">
        <div v-if="researchLists" class="clearfix">
          <div v-for="(item, index) in researchLists" :key="index" class="pa10 list-decoration fl">
            <el-card shadow="never">
              <div class="clearfix">
                <div class="title-decoration text-s-o">{{ item.title }}</div>
              </div>
              <div class="clearfix marginT10">
                <div
                  v-for="(cateory, inx) in item.categoryNameList"
                  :key="inx"
                  class="fl tags tag-decoration tag-decoration-color fs-12 marginLR5"
                >
                  <span>{{ cateory }}</span>
                </div>
              </div>

              <div class="tag-lineheight marginT20">
                <div v-if="item.activityProgress === 'NOT_STARTED'" class="fl tag-status fs-14">未开始</div>
                <div v-if="item.activityProgress === 'STARTED'" class="fl tag-status fs-14">进行中</div>
                <div v-if="item.activityProgress === 'ENDED'" class="fl tag-status fs-14">已结束</div>
                <span
                  v-if="item.activityProgress === 'NOT_STARTED'"
                  class="marginL10 text-s-o fs-14"
                >{{ item.startTime }}</span>
              </div>
            </el-card>
          </div>
        </div>
        <pagination :total="researchTotal ? researchTotal : 0" @pagination="paginationResearch" />
      </el-tab-pane>
      <el-tab-pane :label="'在线课程(' + liveTotal + ')'">
        <div v-if="liveLists && liveLists.length > 0" class="clearfix">
          <div
            v-for="(item, index) in liveLists"
            :key="index"
            class="clearfix pa10 list-decoration fl"
          >
            <el-card shadow="never">
              <video width="100%" controls class="clearfix">
                <source :src="item.coverImageUrl" type="video/mp4" />
              </video>
              <!-- <el-image
                src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
              />-->

              <div class="title-decoration text-s-o">{{ item.title }}</div>
              <div class="tag-lineheight">
                <div class="fl fs-12">
                  <el-breadcrumb separator="/">
                    <el-breadcrumb-item class="fs-12">
                      <span
                        v-if="item.GROWTH_CLASSIFY.itemName"
                      >{{ item.GROWTH_CLASSIFY.itemName }} /</span>
                      <span v-if="item.STAGE.itemName">{{ item.STAGE.itemName }} /</span>
                      <span v-if="item.SUBJECT.itemName">{{ item.SUBJECT.itemName }}</span>
                    </el-breadcrumb-item>
                  </el-breadcrumb>
                </div>

                <span class="marginL10 text-s-o fs-12 fr">
                  {{
                  item.startTime
                  }}
                </span>
              </div>
            </el-card>
          </div>
        </div>
        <pagination :total="liveTotal ? liveTotal : 0" @pagination="paginationLive" />
      </el-tab-pane>
      <!-- <el-tab-pane label="文章(24)">待开发</el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script>
import { getTeachingList, getResearchList, userWebCastPage } from '@/api/users';
import Pagination from '@/components/Pagination/index';
export default {
  name: 'List',
  components: { Pagination },
  data () {
    return {
      // 备课搜索
      teachingLists: null,
      teachingTotal: 0,
      listQueryTeaching: {
        condition: this.$route.query.param,
        pager: {
          page: 1,
          pageSize: 10
        }
      },

      // 教研搜索
      researchLists: null,
      researchTotal: 0,
      listQueryResearch: {
        condition: this.$route.query.param,
        pager: {
          page: 1,
          pageSize: 10
        }
      },

      // 在线课程搜索
      liveLists: null,
      liveTotal: 0,
      listQueryLive: {
        condition: {
          endTime: null,
          keyword: null,
          startTime: null,
          status: null,
          userId: this.$route.query.param
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      }
    };
  },
  created () {
    // this.studyLnit();
    // this.researchInit();
    // this.liveInit();
    this.init();
  },
  methods: {
    async init () {
      await this.teachingInit();
      await this.liveInit();
      await this.researchInit();
    },

    // 备课
    teachingInit () {
      console.log('备课:', this.listQueryTeaching);
      getTeachingList(this.listQueryTeaching)
        .then(res => {
          console.log('teachingLists:', res.data);
          this.teachingLists = res.data.records;
          this.teachingTotal = res.data.total;
        })
        .catch(error => { });
    },
    paginationTeaching ({ page, limit }) {
      this.listQueryTeaching.pager.page = page;
      this.listQueryTeaching.pager.pageSize = limit;
      this.teachingInit();
    },

    // 教研
    researchInit () {
      getResearchList(this.listQueryResearch)
        .then(res => {
          console.log('getResearchList:', res.data);
          this.researchLists = res.data.records;
          this.researchTotal = res.data.total;
        })
        .catch(error => { });
    },
    paginationResearch ({ page, limit }) {
      this.listQueryResearch.pager.page = page;
      this.listQueryResearch.pager.pageSize = limit;
      this.researchInit();
    },

    // 在线课程
    liveInit () {
      userWebCastPage(this.listQueryLive)
        .then(res => {
          var arr = [
            'GROWTH_CLASSIFY',
            'STAGE',
            'SUBJECT',
            'TEXTBOOK_VERSION',
            'GRADE'
          ];

          arr.map(item => {
            res.data.records.map(records => {
              if (this.checkArr(records.categoryList)) {
                var items = records.categoryList.filter(
                  category => category.groupEnum === item
                );
                records[item] =
                  items.length > 0
                    ? items[0]
                    : {
                      cateId: '',
                      groupEnum: '',
                      itemCode: '',
                      itemName: ''
                    };
              } else {
                records[item] = {
                  cateId: '',
                  groupEnum: '',
                  itemCode: '',
                  itemName: ''
                };
              }
            });
          });

          this.liveLists = res.data.records;
          this.liveTotal = res.data.total;
        })
        .catch(error => { });
    },
    paginationLive ({ page, limit }) {
      this.listQueryLive.pager.page = page;
      this.listQueryLive.pager.pageSize = limit;
      this.liveInit();
    }
  }
};
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.tag {
  border: 1px solid black;
  border-radius: 20px;
  padding: 5px 10px;
  &-status {
    background: rgb(79, 192, 141);
    color: white;
    height: 20px;
    padding: 0 10px;
  }
  &-lineheight {
    line-height: 20px;
  }
}
.list-decoration {
  width: 350px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  &-underline {
    border: 0px;
    border-bottom: 1px solid black;
  }
}
.title-decoration {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.font-color {
  color: #b5b5b5;
}
.tag-decoration {
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  font-size: 12px;
  background: rgb(215, 215, 215);
  color: black;
  &-color {
    background: rgb(215, 215, 215);
    border: 0px;
  }
}
</style>
